<template>
	<view style="width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: flex-start;align-items: center; ">
		<view class="padding-sm response">
			<u-search placeholder="请输入教练姓名" v-model="name" @search="srchForACoach" :clearabled="true" @change="clear1" @custom="clear"></u-search>
		</view>
		<view class="title_top">
			<u-dropdown>
				<u-dropdown-item v-model="subjectid" title="科目类别" :options="subjectList" @change="closeDropdown()"></u-dropdown-item>
				<u-dropdown-item v-model="year_h" title="执教年限" :options="sort" @change="closeDropdown()"></u-dropdown-item>
				<u-dropdown-item v-model="star_h" title="星级排序 " :options="sort" @change="closeDropdown()"></u-dropdown-item>
			</u-dropdown>
		</view>
		<xw-empty :isShow="emptyShow" text="暂无相关数据" textColor="#777777"></xw-empty>
		<!-- 教练滑动窗口 -->
		<scroll-view
			:enable-flex="true"
			:show-scrollbar="false"
			@scrolltolower="lower"
			:scroll-y="true"
			style="width: 702rpx;display: flex;flex-direction: column; align-items: center;height:100vh; overflow: scroll;
		"
		>
			<!-- item -->
			<view
				style="width: 702rpx;height: 400rpx; margin-top: 40rpx; display: flex;flex-direction: column;align-items: center;"
				v-for="(i, index) in data"
				:key="index"
				@click=" gotoArticleTeachid(i.id) "
			>
				<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;align-items: center;">
						<!-- 头像 -->
						<image mode="aspectFill" :src="i.thumbnail" style="width: 150rpx;height: 150rpx;border-radius: 50%;" @click.stop="preview(i.thumbnail)"></image>
						<!-- 基本信息 -->
						<view style="display: flex;flex-direction: column;margin-left: 31rpx;">
							<!-- 姓名和星级 -->
							<view style="display: flex;">
								<!-- 姓名 -->
								<text style="font-size: 36rpx;color: #333333;">{{ i.post_title }}</text>
								<!-- 星级 -->
								<u-rate :count="value" v-model="i.star" :disabled="true" :size="18" style="margin-left: 26rpx;"></u-rate>
							</view>
							<!-- 科目和学员数量 -->
							<view style="display: flex;font-size: 28rpx;margin-top: 30rpx; align-items: center;">
								<!-- 科目 -->
								<text style="color: #666666;">{{ i.zhiwu ? i.zhiwu : '' }}</text>
								<!-- 学员人数 -->
							</view>
							<view style="display: flex;font-size: 28rpx;margin-top: 10rpx; align-items: center;">
								<text style="color: #F96A15;">{{ i.students }}</text>
								<text style="color: #F96A15;">名学员</text>
							</view>
							<!-- 标签 -->

							<view style="width: 400rpx; display: flex; margin-top: 10rpx;flex-wrap: wrap;">
								<block v-for="(item, index) in i.post_keywords" :key="index">
									<view style=" display: flex;align-items: center;margin-right: 40rpx;margin-top: 10rpx;" v-if="item">
										<view style="width: 8rpx;height: 8rpx;background-color: #CCCCCC;border-radius: 50%;"></view>
										<text style="font-size: 26rpx;color: #666666;margin-left: 10rpx;">{{ item }}</text>
									</view>
								</block>
							</view>
						</view>
					</view>
					<!-- 右侧信息 -->
					<view style="height: 100%; display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
						<text style="font-size: 28rpx;color: #666666; white-space: normal;">{{ i.driver_school }}</text>
						<text style="font-size: 28rpx;color: #3187FB;">查看更多</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view style="margin-top: 40rpx;width: 100%;height: 1px;background-color: #F0F2F5;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import helper from '../../common/helper.js';
import xwEmpty from '../../components/xw-empty/xw-empty.vue';
export default {
	components: {
		xwEmpty,
	},
	data() {
		return {
			/**
				 * 科目类别
				 * item - {
					label: 'C照',
					value: 1,
				}
				 */
			subjectList: [],
			//排序 0 降序 1 升序
			sort: [
				{
					label: '降序',
					value: 0,
				},
				{
					label: '升序',
					value: 1,
				},
			],
			// 总星级
			data: [
				/**
				 * id	教练信息文章id
				 * post_title	教练姓名
				 * post_keywords	教练标签
				 * thumbnail	教练头像
				 * more	教练风采
				 * star	教练星级
				 * driver_school	所属驾校
				 * subject_id	科目id
				 * subject_name	科目名称
				 * students	学员数量
				 */
			],
			value: 5,
			// 星级排序
			star_h: 0,
			//执教年限
			year_h: 0,
			//当前选择的科目
			subjectid: '',
			page: 1,
			pagesize: 10,
			
			name: '',
			emptyShow: false,
			
		};
	},
	onShow() {
		// 初始化科目分类数据
		this.getSubjectList();
		//如果是首页跳过来的，初始化教练筛选项目
		if (helper.subId != 0) {
			this.subjectid = helper.subId;
		}
		this.coachingTeam(0);
	},
	methods: {
		clear1(e) {
			console.log('e :>> ', e);
			if (!e) {
				this.name = '';
				this.emptyShow = false;
				this.coachingTeam(0);
			}
		},
		clear() {
			this.name = '';
			this.emptyShow = false;
			this.coachingTeam(0);
		},
		srchForACoach() {
			this.coachingTeam(0);
		},
		preview(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		// 教练团队
		async coachingTeam(style) {
			//如果是初始化数据，就把page重置
			if (style == 0) this.page = 1;

			let res = await this.$request.get('api/Home/teachtor_list', {
				data: {
					page: this.page,
					pagesize: this.pagesize,
					star_h: this.star_h,
					year_h: this.year_h,
					subject_id: this.subjectid,
					name: this.name,
				},
			});
			// 把新数据追加到当前数组列为1,初始化数据为0

			if (style == 1) {
				console.log('1111 :>> ', 1111);
				if (res.data.data != '') this.data = this.data.concat(res.data.data);
			} else {
				console.log('2222 :>> ', 2222);
				this.data = res.data.data;

				if (res.data.data.length == 0) {
					this.emptyShow = true;
					this.emptyShow = true;
				}
			}
		},
		//页面到达底部刷新数据
		lower() {
			console.log('页面到达底部');
			this.page += 1;
			this.coachingTeam(1);
		},
		//获取科目类别
		async getSubjectList() {
			// uni.$showLoading()
			let res;
			try {
				res = await this.$request.get('api/Home/subject_list');
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			// 把科目类目数据从后台获取过来,存入筛选器
			let newSubjectList = res.data.data;
			// 只需要存入筛选器需要的名称和id
			this.subjectList = [
				{
					label: '全部',
					value: '',
				},
			];
			for (let i = 0; i < newSubjectList.length; i++) {
				this.subjectList.push({
					label: newSubjectList[i].name,
					value: newSubjectList[i].id,
				});
			}
		},
		// 设置筛选项目
		closeDropdown() {
			console.log('触发');
			this.coachingTeam(0);
		},
		// 跳转教练详情
		gotoArticleTeachid(id) {
			console.log('id', id);
			this.$Router.push({
				name: 'jiaolianxiangqing',
				params: {
					id: id,
				},
			});
		},
	},
};
</script>

<style lang="scss">
.title_top {
	width: 100%;
	height: 80rpx;
	border-bottom: 1rpx solid #f0f2f5;
}
</style>
